<template>
    <div class="counting-game">
        <transition-group name="roles" tag="div" class="counting-list">
            <div class="counting-role" v-for="(r, index) in board.roles" :key="r ? r.player.id : -10">
                <div v-if="r" class="counting-tip" :class="{ animated: index === 1 }">
                    <i v-if="r.wrong" class="fa fa-fw fa-close"></i>
                    <i v-if="r.right" class="fa fa-fw fa-check"></i>
                    <span>{{ index === 0 ? r.count : index === 1 ? r.count === false ? '报数中' + ellipsis : r.count : ('准备中' + ellipsis) }}</span>
                </div>
                <div v-if="r" class="counting-index">
                    <div>{{ r.type === common.role.system ? '系统' : r.player.id === role.player.id ? '我' : ((r.group + 1) + '号') }}</div>
                    <div v-if="r.type !== common.role.system && r.player.id !== role.player.id">{{ r.player.name }}</div>
                </div>
            </div>
        </transition-group>
        <div class="counting-board">
            <div v-if="room.settings.wrongConfirm && board.stage !== common.stages.wrong" class="counting-countdown">倒计时:{{ board.countdown }}</div>
            <div class="counting-info" v-if="board.stage === common.stages.index">
                <div class="tip-header">您是第</div>
                <div class="counting-index">{{ role.group + 1 }}号</div>
                <div class="tip-footer">报数人</div>
            </div>
            <div class="counting-info" v-if="board.stage === common.stages.starting">
                <div class="counting-round">Round {{ board.round }}</div>
            </div>
            <div class="counting-info" v-if="board.stage === common.stages.number">
                <div class="tip-header">本轮的危险数字为</div>
                <div class="counting-number">{{ board.number }}</div>
                <div class="tip-footer">如果待报数字出现了<span class="tip-number">{{ board.number }}</span>或是<span class="tip-number">{{ board.number }}</span>的倍数时请点击[PASS]按钮</div>
                <div class="tip-footer">否则请点击[报数]按钮</div>
            </div>
            <div class="counting-info" v-if="board.stage === common.stages.counting">
                <div class="counting-prepare" v-if="board.next.player.id === role.player.id">请准备</div>
                <div class="counting-counting" v-else-if="board.current.player.id === role.player.id">
                    <div @click="doCount" @touchstart="doCount" class="counting-btn btn-count">报数</div>
                    <div @click="doPass" @touchstart="doPass" class="counting-btn btn-pass">PASS</div>
                </div>
                <template v-else>
                    <div class="tip-header">当前<span v-if="board.current.type !== common.role.system" class="counting-status-index">{{ board.current.group + 1}}号玩家</span></div>
                    <div class="counting-status">{{ board.current.player.name }}</div>
                    <div class="tip-footer">正在报数</div>
                </template>
            </div>
            <div class="counting-info" v-if="board.stage === common.stages.wrong">
                <div class="tip-header"><span>{{ board.current.player.id === role.player.id ? '您' : (`${ board.current.group + 1 }号玩家 ${ board.current.player.name }`) }}</span> 犯错了</div>
                <template v-if="board.current.wrong === common.wrong.divisible">
                    <div class="wrong-count"><span>{{ board.count }}</span><span class="wrong-info divisible">/{{ board.number }}</span></div>
                    <div class="tip-footer"><span class="tip-number">{{ board.number }}</span>的倍数</div>
                </template>
                <template v-else-if="board.current.wrong === common.wrong.pass">
                    <div class="wrong-count"><span>{{ board.count }}</span></div>
                    <div class="tip-footer">不含<span class="tip-number">{{ board.number }}</span>也不是<span class="tip-number">{{ board.number }}</span>的倍数</div>
                </template>
                <template v-else-if="board.current.wrong === common.wrong.single">
                    <div class="wrong-count"><span v-if="board.count >= 10">{{ Math.floor(board.count / 10) }}</span><span class="wrong-info">{{ board.count % 10 }}</span></div>
                    <div class="tip-footer">个位含<span class="tip-number">{{ board.number }}</span></div>
                </template>
                <template v-else-if="board.current.wrong === common.wrong.ten">
                    <div class="wrong-count"><span class="wrong-info">{{ Math.floor(board.count / 10) }}</span><span>{{ board.count % 10 }}</span></div>
                    <div class="tip-footer">十位含<span class="tip-number">{{ board.number }}</span></div>
                </template>
                <template v-else-if="board.current.wrong === common.wrong.timeout">
                    <div class="wrong-count"><span>{{ board.count }}</span></div>
                    <div class="tip-footer">超时未报数</div>
                </template>
                <div @click="confirmWrong" @touchstart="confirmWrong" class="tip-footer" v-if="board.current.player.id === role.player.id && room.settings.wrongConfirm">点击继续</div>
            </div>
        </div>
    </div>
</template>
<script>
    import { mixin, utils } from 'board-game/client';

    import common from './../common';

    export default {
        name: "game",
        mixins: [ mixin ],
        computed: {
            ellipsis() {
                let t = this.board.tick % 3;
                return t === 0 ? '.' : t === 1 ? '..' : '...';
            }
        },
        data() {
            return {
                common: common
            }
        },
        methods: {
            confirmWrong() {
                this.$root.emit.confirmWrong();
            },
            doCount() {
                this.$root.emit.doCount();
            },
            doPass() {
                this.$root.emit.doPass();
            }
        }
    }
</script>
<style lang="less">
    .game {
        .roles {
            overflow: hidden;
        }
        .roles-move {
            transition: transform 0.5s;
        }
        .roles-enter-active, .roles-leave-active {
            margin-left: 0;
            transition: all 0.5s;
        }
        .roles-enter {
            margin-left: -30vmin;
            opacity: 0;
            transform: translateY(100%);
        }
        .roles-enter:last-of-type {
            opacity: 0;
            transform: translateX(30vmin);
        }
        .roles-leave-to {
            margin-left: -30vmin;
            opacity: 0;
            transform: translateX(-30vmin);
        }
    }
    
    @keyframes animated {
        from { transform: rotate(0deg); }
        25% { transform: rotate(15deg); }
        50% { transform: rotate(0deg); }
        75% { transform: rotate(-15deg); }
        to { transform: rotate(0deg); }
    }
</style>
<style lang="less" scoped>
    .counting-game {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        .counting-list {
            width: 100vmin;
            height: 100vmin;
            padding: 12.5vmin 5vmin;
            flex: none;
            display: flex;
            flex-direction: row;
            .counting-role {
                width: 30vmin;
                height: 75vmin;
                background-image: url("./images/man.png");
                background-size: cover;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                .counting-tip {
                    transform-origin: center bottom;
                    background-image: url("./images/tip.png");
                    background-size: cover;
                    font-size: 4vmin;
                    width: 30vmin;
                    height: 15vmin;
                    padding: 2.4vmin 1.2vmin;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &.animated {
                        animation: animated 1.2s infinite linear;
                    }
                }
                .counting-index {
                    margin-top: 20vmin;
                    width: 18vmin;
                    height: 12vmin;
                    font-size: 4vmin;
                    background-color: white;
                    border: 2px solid darkslategray;
                    border-radius: 1vmin;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .counting-board {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: lightgray;
        }
        .counting-countdown {
            flex: none;
            font-size: 1.5em;
            height: 1.5em;
            line-height: 1.5em;
            text-align: right;
            padding: 0 1.5em;
        }
        .counting-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            font-size: 3em;
            > div {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                span {
                    display: inline;
                }
            }
            > .tip-header {
                flex: none;
                align-self: flex-start;
                font-size: 0.6em;
                color: orangered;
                padding: 1em;
            }
            > .tip-footer {
                flex: none;
                align-self: flex-end;
                font-size: 0.3em;
                color: seagreen;
                padding: 1em;
                > .tip-number {
                    color: darkred;
                    font-weight: bold;
                }
            }
            > .counting-index {
                font-size: 2em;
                color: green;
            }
            > .counting-status {
                font-size: 1.5em;
                color: black;
            }
            > .counting-round {
                font-size: 2em;
                font-weight: bold;
                color: gold;
            }
            > .counting-number {
                font-size: 2em;
                color: darkred;
            }
            > .counting-prepare {
                font-size: 1.5em;
                color: green;
            }
            > .counting-counting {
                > .counting-btn {
                    width: 3.5em;
                    height: 3.5em;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &.btn-count {
                        background-color: gold;
                    }
                    &.btn-pass {
                        background-color: green;
                    }
                }
            }
            > .wrong-count {
                font-size: 2em;
                color: green;
                .wrong-info {
                    color: red;
                    &.divisible {
                        font-size: 0.4em;
                        padding-top: 1.2em;
                    }
                }
            }
        }
    }

    @media screen and (orientation: landscape) {
        .counting-game {
            flex-direction: row;
            .counting-list {

            }
            .counting-info {

            }
        }
    }
</style>
